import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withRouter } from "react-router-dom";
import {InputItem, Button, WingBlank,Flex,Icon,Grid,Modal} from 'antd-mobile';

class LoginText extends Component {
    arrayData = [
        {icon:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544965839627&di=68f0951cd881431dc946c2bf54a4aeb1&imgtype=0&src=http%3A%2F%2Fupload.0745news.cn%2F2017%2F0113%2F1484278807105.jpg",text:"微信"},
        {icon:"http://dynamic-image.yesky.com/640x267/uploadImages/2018/205/41/52CAE7A3U29C.jpg",text:"QQ"},
        {icon:"http://cdnimg103.lizhi.fm/audio_cover/2017/02/28/2587853216375797255_320x320.jpg",text:"微博"},
        {icon:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=399891020,3606526032&fm=26&gp=0.jpg",text:"Github"}]
    static propTypes ={
        fetchAction:PropTypes.func.isRequired,
        login:PropTypes.object.isRequired
    }
    alert = Modal.alert;

    showAlert = () => {
        const alertInstance = this.alert('Error', '用户名或密码错误', [
       { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
       { text: 'OK', onPress: () => console.log('ok') },
    ]);}

    onLoginClick() {
        const {login,fetchAction} = this.props
        let account = this.account.state.value
        let password = this.password.state.value
        let url = "http://192.168.43.187:8080/lwj/basic/login?account="+account+"&password="+password
        fetchAction(url)
    }

    onRegisterClick() {
        
        this.props.history.push("/Register");
    }


    render() {
        const {login} = this.props
        console.log(login)
        if(login.myAccount.isSuccess === 1)
            this.props.history.push("/Match");
        else if(login.myAccount.isSuccess === 2)
            this.showAlert();  
        return(
           <div style = {{margin: 50}}>
               <Flex justify="center"><img style = {{align:"center",borderRadius:50, height:100, width:100}} src = "http://www.vsalty.com/lwj/logo.png"/>
               </Flex>
               <WingBlank size="lg" style = {{margin: 20}}>
               <br></br>
                <InputItem  placeholder = "用户名/手机号/邮箱" name = "account" ref ={input=> this.account = input}></InputItem>
                <br></br>
                <br></br>
                <InputItem type ="password" placeholder = "密码" name = "password" ref = {input=> this.password = input}></InputItem>
                <br></br>
                <br></br>
                <Button type = "primary"   onClick = {()=>this.onLoginClick()}>登录</Button>
                <br></br>
                <Button type = "ghost" size="small"   onClick = {()=>this.onRegisterClick()}>注册</Button>
                </WingBlank>
                <div style = {{color: "#888",fontSize: 14, padding: "15px 0 9px 15px"}}>第三方登录</div>
                <Grid style = {{color:"red"}} data={this.arrayData} hasLine={true} ></Grid>
            </div>
        )
    }
}

export default withRouter(LoginText)